<template>
	<view>
		<app-dialog ref="dialog" width="100%" @confirm="save" bg="" :isFooter="false" :isClose="false">
			<view class="content">
				<view class="title">
					<view>新增商家</view>
					<u-icon name="close" color="#276329" size="36" @tap="close"></u-icon>
				</view>
				<view class="list">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="160rpx">
						<u-form-item label="商家名称：" prop="name" ref="item1">
							<u--input v-model="model1.name" placeholder="请输入商家名称"></u--input>
						</u-form-item>
						<u-form-item label="商家地点：" prop="name" ref="item1">
							<u--input disabled="true" v-model="model1.address" placeholder="请输入商家地点"
								@tap="chooseCity"></u--input>
						</u-form-item>
					</u--form>
					<u-button type="primary" text="保存" customStyle="margin-top: 50px" @click="save"
						color="linear-gradient(to right, rgb(0, 150, 136), rgb(139, 195, 74))"></u-button>
				</view>
			</view>


		</app-dialog>
		<!-- 城市选择 -->
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
			@cancel="cancel" :visible="visible" />

	</view>
</template>

<script>
	import cityPicker from '@/components/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	export default {
		components: {
			cityPicker,

		},
		data() {
			return {
				model1: {
					name: '',
					address: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入商家名称',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}
				},
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		components: {
			cityPicker
		},
		methods: {
			/**
			 * 保存
			 */
			async save() {
				try {
					console.log(this.model1)
					this.$http.post('/app/sj/addSj', {
						sjmc:this.model1.name,
						smc:this.model1.address,
					}).then(res => {
						if(res.code === 0){
							this.$emit('getList');
							this.$refs.dialog.close();
						}
					})
					///	this.$refs.dialog.close();
					//	this.hideLoading();
				} catch (e) {
					this.errorLoading(e);
				}
			},
			// 弹窗
			async open() {
				// 打开弹框
				await this.$refs.dialog.open();
			},
			async close() {
				await this.$refs.dialog.close();
			},
			chooseCity() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.model1.address = val.name
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			//提交数据
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					this.visible = false
					// uni.navigateTo({
					// 	url: "/pages/gly/gly_form"
					// })
				}).catch(errors => {
					this.visible = false
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.title {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #276329;

		}

		.list {}
	}

	/deep/ .u-form {
		.u-form-item__body__right {
			border: 1rpx solid #276329 !important;
			height: 70rpx !important;
		}
	}
</style>